<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		
		/* 不能用br标签换行 得转块元素 */
		/* display:block 行变块 */
		/* display:inline 块变行 */
		/* display:inline-block 行内块 宽高既能生效又能在一行共存 */
		*{
			margin:0;
			padding:0;
		}
		#user,#pass,#add{
			display:block;
		}
		span{
			position:absolute;top:0;left:175px;
		}
	</style>
	<body>
		
		<!-- form表单用户输入数据区 -->
		<!-- input 别忘了设置类名或id名 -->
		<!-- placeholder 写上这样看着美观 -->
		<!-- 别用br标签强制换行 看上面css注释 -->
		
		<form>
			<input type="text" name="" id="user" placeholder="用户名"/><span id="tijiao"></span>
			<input type="text" name="" id="pass" placeholder="密码"/>
			<input type="button" value="提交" id="add" />
		</form>
		
	</body>
	<script>
		
		// 获取元素  id user pass add
		let userDom = document.querySelector("#user");
		let passDom = document.querySelector("#pass");
		let addDom = document.querySelector("#add");
		
		// 点击id add 提交
		addDom.addEventListener("click",function(){
			
			// 获取value值
			name = userDom.value;
			pass = passDom.value;
			
			// ajax 原生 高岗版
			let ajax = new XMLHttpRequest();
			// 写到这别懵逼  ` .... `  这是个语法（高级浏览器才能使用 ）不用字符串拼接很方便
			// 但是用了这个之后 你写其他代码时 再使用 （）  正常shift+9 一个完整的括号就出来 ，但是使用了这个语法后就不能了得手动补全
			ajax.open("get",`http://127.0.0.1:48662/zhu?name=${name}&pass=${pass}`,true);
			ajax.send();
			
			ajax.onreadystatechange=function(){
				
				if(ajax.status==200&&ajax.readyState==4){
					
					console.log(ajax.responseText);
					
				}
				
			}
			
		})
		
		// 失去焦点后 验证服务器 json数据库里有没有这个用户名
		userDom.addEventListener("blur",function(){
			
			console.log("aa");
			
			let name = userDom.value;
			
			let ajax = new XMLHttpRequest();
			ajax.open("get",`http://127.0.0.1:48662/yan?name=${name}`,true);
			ajax.send();
			
			ajax.onreadystatechange=function(){
				
				if(ajax.readyState==4&&ajax.status==200){
					
					console.log(ajax.responseText);
					// 看看后台反馈回来什么结果 no 就是已存在该用户 ok则可以注册
					// disabled 按钮能否被点击   true = 不能按  false = 可以按 
					if(ajax.responseText == "no"){
						document.querySelector("#tijiao").innerHTML="用户名已存在，不能注册";
						addDom.disabled=true
					}else{
						document.querySelector("#tijiao").innerHTML="用户名可以注册";
						addDom.disabled=false
					}
					
				}
				
			}
			
		})
			
	    //  回到寝室一直写到了11点 两个致命失误及其简单：  ajax.onreadystatechange 没写 on  ； span id #tijiao   我在下面ajax里一直写成 #tishi 
	    //  弄出来了也可以好好休息了，给它弄上码云仓库去.
	    //  照老师敲了一遍就自己开始闹革命了 写的过程中还是记忆稍多吧边回忆边理解.
	</script>
</html>
